import React,{Component} from 'react'
import { Checkbox, Row, Col,Button } from 'antd';

const defaultCheckedList = ['A', 'B'];
const plainOptions  = ['A', 'B','C','D','E','F','G','H'];
class CheckboxGroup extends Component{
    constructor(props){
        super(props)
        this.state = {
            checkedList:[]
        }
    }
    handleChange(checkedValues){
        console.log('checked = ', checkedValues);
        this.setState({
            checkedList:checkedValues
        })
    }
    handleClickAll(){
        this.setState({
            checkedList:plainOptions
        })
    }
    handleClick(){
        const allSet =new Set(this.state.checkedList)
        console.log(allSet)
        const arr =[];
        plainOptions.map((item) => {
            if(!allSet.has(item)){
                arr.push(item)
            }
        })
        this.setState({
            checkedList:arr
        })
    }
    clearChecked(){
        this.setState({
            checkedList:[]
        })
    }
    render(){
        return (
            <div>
                <div>
                    <Button onClick={this.handleClickAll.bind(this)}>全选</Button>
                    <Button onClick={this.handleClick.bind(this)}>反选</Button>
                    <Button onClick={this.clearChecked.bind(this)}>取消选中</Button>
                </div>
                <Checkbox.Group onChange={this.handleChange.bind(this)} value={this.state.checkedList} >
                    <Row>
                        <Col span={8}><Checkbox value="A">A</Checkbox></Col>
                        <Col span={8}><Checkbox value="B">B</Checkbox></Col>
                        <Col span={8}><Checkbox value="C">C</Checkbox></Col>
                    </Row>
                    <Row>
                        <Col span={8}><Checkbox value="E">E</Checkbox></Col>
                        <Col span={8}><Checkbox value="F">F</Checkbox></Col>
                        <Col span={8}><Checkbox value="G">G</Checkbox></Col>
                    </Row>
                </Checkbox.Group>
            </div>
        )
    }
}

export default CheckboxGroup